var buttonCount = 0;
var fieldCount = 0;
var labelCount = 0;
var textAreaCount = 0;
var comboboxCount = 0;
var checkboxCount = 0;
var radioButtonCount = 0;

$(function() {
	$('#droppable').droppable({
        scope: "items"
        // if you want to disable the dragging after drop un-comment this
/*
        drop: function(e, ui) {
            $(ui.draggable).draggable({"disabled":true});
        }
        */
    });
	
	//shows list of choices for dropdown, radio button, checkbox
	$("#cmdDivList").click(function(){
		showDivList();
	});
	
	//appends the choices per line for dropdown, radio button, checkbox
	$("#ListOk").click(function(){
		appendList();
	});
	
	//displays save dialog
	$("#saveWSDialog").click(function(){
		saveWorkspace();
	});
	
	//saves and renders ws
	$("#saveWSRender").click(function(){
		renderWorkspace();
	});
	
	//add label to the canvass
	$("#cLabel").click(function(){
		addLabel();
	});
	
	//add text field to the canvass
	$("#cTextField").click(function(){
		addField();
	});
	
	//add text area field to the canvass
	$("#cTextArea").click(function(){
		addTextArea();
	});
	
	//add combo box field to the canvass
	$("#cComboBox").click(function(){
		addCombobox();
	});
	
	//add check box field to the canvass
	$("#cCheckBox").click(function(){
		addCheckBox();
	});
	
	//add radio button field to the canvass
	$("#cRadioButton").click(function(){
		addRadioButton();
	});

	
	//handles ctrl-s 
	$(document).keydown(function(event) {
		var currKey=0,e=e||event; 
		currKey=e.keyCode||e.which||e.charCode;  //do this handle FF and IE
		if (!( String.fromCharCode(event.which).toLowerCase() == 's' && event.ctrlKey) && !(event.which == 19)) return true;
			event.preventDefault();
			saveWorkspace();
			return false;
	});   
	
	$(window).unbind('keypress').keypress(function(event) {
        if (!(event.which == 115 && event.ctrlKey)) return true;
            $('#save').click();
            event.preventDefault();
            return false;
    });
	
	//initialize color picker
	$("#pFontColor").colorPicker();
	$('#droppable').css('max-width','950px');
	//initalize ws canvass size
	$('#droppable').css('width',$(window).width()-300);
	$('#droppable').css('height',$(window).height()-131);
	
	$(window).resize(function(){
		$('#droppable').css('width',$(window).width()-300);
		$('#droppable').css('height',$(window).height()-131);
	});
	//
		
});

function renderWorkspace(){
	
	$('#droppable').find('img').remove();
	$('#droppable').find('div').css('border','0px');
	$('#droppable').find('input').attr('readonly',false);
	$('#droppable').find('textarea').attr('readonly',false);
	
	var divContent = $( "#droppable" ).html();
	var textFields = $('#droppable :input');
	var devFields = $('#divDevSection :input');
	var fieldCount = 0;
	var fieldNames='';
	var fields = new Array();
	
	for(var i=0;i<textFields.length;i++){
		fields[fieldCount] = textFields[i].name;
		fieldCount++;
	}
	
	for(var i=0;i<devFields.length;i++){
		fields[fieldCount] = devFields[i].name;
		fieldCount++;
	}
	
	
	fields = removeDuplicates(fields);
	fieldNames = fields.join(",");
	
	$("#fields").val(fieldNames);
	$("#content").val("")
	$("#content").val(divContent);
	document.frmWorkspace.submit();
}

function addButton(){
	var ws = new Workspace();
	var cmd = new Button();
	
	buttonCount++;
	cmd.setID("Button_" + buttonCount);
	cmd.setParentID("divButton_" + buttonCount);
	cmd.setWidth('120px');
	cmd.setHeight('60px');
	cmd.setClass('classname');
	cmd.setParentClass('draggable');
	ws.addElement(cmd);
}

function addField(){
	var ws = new Workspace();
	var txt = new TextField();
	
	fieldCount++;
	txt.setID("Textbox_" + fieldCount);
	txt.setParentID("divTextbox_" + fieldCount);
	txt.setWidth('200px');
	txt.setHeight('30px');
	txt.setClass('');
	txt.setParentClass('draggable');
	ws.addElement(txt);	
}

function addLabel(){
	var ws = new Workspace();
	var lbl = new Label();
	
	labelCount++;
	
	lbl.setID("Label_" + labelCount);
	lbl.setParentID("divLabel_" + labelCount);
	lbl.setWidth('100px');
	lbl.setHeight('30px');
	lbl.setClass('');
	lbl.setParentClass('draggable');
	ws.addElement(lbl);	
}

function addTextArea(){
	var ws = new Workspace();
	var txtArea = new TextArea();
	
	textAreaCount++;
	
	txtArea.setID("TextArea_" + textAreaCount);
	txtArea.setParentID("divLabel_" + textAreaCount);
	txtArea.setWidth('100px');
	txtArea.setHeight('30px');
	txtArea.setClass('');
	txtArea.setParentClass('draggable');
	ws.addElement(txtArea);	
}

function addCombobox(){
	var ws = new Workspace();
	var com = new Combobox();
	
	comboboxCount++;
	
	com.setID("Combobox" + comboboxCount);
	com.setParentID("divLabel_" + comboboxCount);
	com.setWidth('100px');
	com.setHeight('30px');
	com.setClass('');
	com.setParentClass('draggable');
	ws.addElement(com);	
}

function addCheckBox(){
	var ws = new Workspace();
	var chk = new Checkbox();
	
	checkboxCount++;
	
	chk.setID("Checkbox" + checkboxCount);
	chk.setParentID("divLabel_" + checkboxCount);
	chk.setWidth('100px');
	chk.setHeight('30px');
	chk.setClass('');
	chk.setParentClass('draggable');
	ws.addElement(chk);	
}

function addRadioButton(){
	var ws = new Workspace();
	var rd = new RadioButton();
	
	radioButtonCount++;
	
	rd.setID("Radio" + radioButtonCount);
	rd.setParentID("divLabel_" + radioButtonCount);
	rd.setWidth('100px');
	rd.setHeight('30px');
	rd.setClass('');
	rd.setParentClass('draggable');
	ws.addElement(rd);	
}


function getPropertyDetails(obj){
	
	var cid = $(obj).children();
	
	$("#pID").val($(cid[1]).attr('id'));
	$("#pName").val($(cid[1]).attr('name'));
	$("#pText").val($(cid[1]).val());
	
	if($("#pText").val()=="") $("#pText").val($(cid[1]).text());
	$("#pFontColor").val($(cid[1]).css('color'));
	$("#pFontSize").val($(cid[1]).css('font-size'));
	$("#pWidth").val($(cid[1]).css('width'));
	$("#pHeight").val($(cid[1]).css('height'));
	$("#pFontWeight").val($(cid[1]).css('font-weight'));
	$("#pFontStyle").val($(cid[1]).css('font-style'));
	
}

function setPropertyDetails(obj, property){

	var id = $("#pID").val();
	switch(property){
		case "Name":
			$("#"+ id).attr('name', obj.value);
			break;
		case "Text":
			$("#"+ id).attr('value', obj.value);
			$("#"+ id).val(obj.value);
			$("#"+ id).text(obj.value);
			break;
		case "FontSize":
			$("#"+ id).css('font-size', obj.value);
			break;
		case "Width":
			$("#"+ id).css('width', obj.value);
			break;
		case "Height":
			$("#"+ id).css('height', obj.value);
			break;
		case "Font-Color":
			$("#"+ id).css('color', obj.value);
			break;
		case "FontWeight":
			$("#"+ id).css('font-weight', obj.value);
			break;
		case "FontStyle":
			$("#"+ id).css('font-style', obj.value);
			break;
	}
	
}

function saveWorkspace()
{
	$( "#divSave" ).dialog({
		height:200,
		width:450,
		modal:true,
		resizable:false
	});
}

function showDivList(){
	$( "#cList" ).dialog({
		height:300,
		width:320,
		modal:true,
		resizable:false
	});
}

function appendList(){
	
	var list = $("#txtList").val();
	var varList = list.split("\n");
	var pID = $("#pID").val();
	var elementType = String($("#" + pID).attr('type'));
	var options='';
	if(elementType.toLowerCase()=="checkbox"){
		//checkbox
		options+='<img id="del_' + pID +'" src="/images/delete.gif" style="top:0px;vertical-align:top;cursor:pointer">&nbsp;'
		for(var i=0; i<varList.length;i++){
			options += "<input type='checkbox' id= "+ pID + " name='" + pID + "' value='" + varList[i] + "'/> " + varList[i] + "<br/>";
		}
		$("#" + pID).parent().html(options);
		
		$("#del_" + pID).click(function(){
			var ans = confirm("Are you sure you want to delete this object?");
			if(ans==true){
				$(this).parent().remove();
			}
		});	
	}else if(elementType.toLowerCase()=="radio"){
		//radio
		options+='<img id="del_' + pID +'" src="/images/delete.gif" style="top:0px;vertical-align:top;cursor:pointer">&nbsp;'
		for(var i=0; i<varList.length;i++){
			options += "<input type='radio' id= "+ pID + " name='" + pID + "' value='" + varList[i] + "'/> " + varList[i] + "&nbsp;";
		}
		$("#" + pID).parent().html(options);
		
		$("#del_" + pID).click(function(){
			var ans = confirm("Are you sure you want to delete this object?");
			if(ans==true){
				$(this).parent().remove();
			}
		});	
	}else{
		//combo box
		for(var i=0; i<varList.length;i++){
			options += "<option value='" + varList[i] + "'>" + varList[i] + "</option>";
		}	
		$("#" + pID).html(options);
	}
	
	$("#cList").dialog( "close" );
	
}

